<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="search-form" size="mini">
      <el-form-item label="手机号">
        <el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="searchForm.nickname" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="选择状态">
          <el-option label="已撤销" :value="0"></el-option>
          <el-option label="待发布" :value="1"></el-option>
          <el-option label="已发布" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='时间：'>
        <el-date-picker v-model='rangeTime' type='datetimerange' start-placeholder='开始' end-placeholder='结束' />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%;" border v-loading="loading" size="mini">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="100"></el-table-column>
      <el-table-column prop="content" label="内容" min-width="200" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="pic" label="图片">
        <template slot-scope="scope">
          <el-image v-if="scope.row.pic" :src="scope.row.picOne" style="width: 100px; height: 100px" />
          <span v-else>无图片</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template slot-scope="scope">
          <el-tag :type="getStatusText(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="agreeCount" label="点赞数" width="60"></el-table-column>
      <el-table-column prop="rejectCount" label="点踩数" width="60"></el-table-column>
      <el-table-column prop="createTime" label="时间" width="160"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showDetail(scope.row)">
            详情
          </el-button>
          <el-button size="mini" type="primary" @click="showComment(scope.row)">
            评论
          </el-button>
          <el-button v-if="scope.row.status === 2" size="mini" type="danger" @click="cancel(scope.row)">
            撤销
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class='page'>
      <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
        :current-page='pageParams.pageNum' :page-sizes='[5, 10, 15]' :page-size='pageParams.pageSize'
        layout='total, sizes, prev, pager, next' :total='total'></el-pagination>
    </div>
    <el-dialog title="沸点详情" :visible.sync="dialogVisible" width="700px" :close-on-click-modal="false">
      <el-descriptions title="沸点详情" border :column="1">
        <el-descriptions-item label="内容">{{ detailData.content }}</el-descriptions-item>
        <el-descriptions-item label="图片">
          <el-row :gutter="5">
            <el-col :span="8" v-for="(item, index) in detailData.picArr" :key="index">
              <el-image :src="item" style="height: 100px" />
            </el-col>
          </el-row>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusText(detailData.status)">
            {{ getStatusText(detailData.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="点赞数">{{ detailData.agreeCount }}</el-descriptions-item>
        <el-descriptions-item label="点踩数">{{ detailData.rejectCount }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog class="comment-list" title="评论列表" :visible.sync="commentVisible" width="700px" center
      @before-close="beforeClose">
      <comment :complaintId="complaintId" :complaint="complaint"></comment>
    </el-dialog>
  </div>
</template>

<script>
import { page, updateStatus, detail } from '@/api/complaint'
import comment from './comment.vue';
export default {
  components: {
    comment
  },
  data() {
    return {
      searchForm: {
        phone: null,
        startDateStr: null,
        endDateStr: null,
        status: null,
        nickname: null
      },
      rangeTime: [],
      tableData: [],
      // 分页参数
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      loading: false,
      dialogVisible: false,
      detailData: {},
      commentVisible: false,
      complaintId: '',
      complaint: {}
    };
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        if (this.rangeTime.length > 0) {
          const startDateStr = formatDate(this.rangeTime[0], 'yyyy-MM-dd HH:mm:ss')
          const endDateStr = formatDate(this.rangeTime[1], 'yyyy-MM-dd HH:mm:ss')
          this.searchForm.startDateStr = startDateStr
          this.searchForm.endDateStr = endDateStr
        }
        const params = {
          ...this.pageParams,
          ...this.searchForm
        }
        const res = await page(params)
        this.tableData = res.records
        this.tableData.forEach(item => {
          // 只取第一张图片
          if (item.pic) {
            item.picOne = item.pic.split(',')[0]
            item.picArr = item.pic.split(',')
          }
        })
        this.total = Number.parseInt(res.total)
      } catch (error) {
      } finally {
        this.loading = false
      }
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.fetchData()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pageParams.pageNum = val
      this.fetchData()
    },
    // 搜索
    handleSearch() {
      this.pageParams.pageNum = 1 // 搜索时重置到第一页
      this.fetchData()
    },
    // 重置
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm = {
        phone: null,
        startDateStr: null,
        endDateStr: null,
        status: null,
        nickname: null
      }
      this.rangeTime = []
      this.pageParams.pageNum = 1
      this.fetchData()
    },
    cancel(row) {
      this.$confirm('确定要撤销该沸点吗?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await updateStatus(row.id, 0);
        this.$message.success(res);
        this.fetchData(); // 刷新数据
      })
    },
    showDetail(row) {
      this.dialogVisible = true
      detail(row.id).then(res => {
        this.detailData = res
        if (this.detailData.pic) {
          this.detailData.picArr = this.detailData.pic.split(',')
        }
      })
    },
    showComment(row) {
      this.complaint = row
      this.complaintId = row.id
      this.commentVisible = true
    },
    beforeClose() {
      this.complaintId = null
      this.complaint = {}
    },
    getStatusText(status) {
      switch (status) {
        case 0: return '已撤销';
        case 1: return '待发布';
        case 2: return '已发布';
        default: return '';
      }
    }
  }
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.comment-list {
  .el-dialog {
    height: 60%;
    overflow-y: auto;
  }
}
</style>
